<template>
  <div class="album">
    <AlbumItem
      v-for="item in albums"
      :key="item.id"
      :item="item"
      @click.native="toAlbumDetail(item.id)"
    />
  </div>
</template>

<script>
import AlbumItem from "@/components/basics/AlbumItem.vue";

export default {
  components: {
    AlbumItem,
  },
  props: {
    keywords: String,
  },
  async created() {
    // 获取专辑详情
    const res = await this.axios.get(
      `/cloudsearch?keywords=${this.keywords}&type=10`
    );
    this.albums = res.data.result.albums;
  },
  data() {
    return {
      albums: [],
    };
  },
  name: "Album",
  methods: {
    // 点击进入专辑详情
    toAlbumDetail(id) {
      this.$router.push({ path: "/album_detail", query: { id } });
    },
  },
};
</script>

<style lang="less" scoped>
</style>